<template>
	<view class="container">
		<!-- Toolbar -->
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<!-- Backdrop -->
		<view class="topBackrop"></view>
		<!-- Top -->
		<view class="topContainer" :style="{'padding-top':((actionBarHeight - 5)+'px')}">
			<view class="top uni-flex uni-column">
				<!-- Tab -->
				<OriginalTabs :tabData="tabData" :defaultSelectIndex='tabSelectedDef' @select="onTabSelected" />
				<!-- 搜索框 -->
				<uni-search-bar radius="5" placeholder="" clearButton="auto" cancelButton="none" @confirm="search"
					bgColor="rgba(255, 255, 255, 0.5)" v-if="tabSelected == 2" />
				<!-- 数据列表 -->
				<OrderList ref="orderList" :defTabId="tabSelectedDef" :class="tabSelected == 2 ? '': 'uni-common-mt'" />
			</view>
		</view>
	</view>
</template>

<script>
	import OriginalTabs from '@/components/tab/OriginalTabs.vue'
	import OrderList from '@/pages/tabBar/order/original/OrderList.vue'
	export default {
		components: {
			OriginalTabs,
			OrderList,
		},
		data() {
			return {
				nvConfig: {
					title: "订单",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
					transparent: {
						initColor: "#000000",
					},
					back: {
						hide: true
					}
				},
				tabSelectedDef: 0,
				tabSelected: 0,
				tabData: [{
					id: 0,
					title: "运输中"
				}, {
					id: 1,
					title: "询价中"
				}, {
					id: 2,
					title: "全部订单"
				}],
			}
		},
		onLoad() {
			this.$refs.orderList.requestOrderData(this.tabSelectedDef)
		},
		computed: {
			actionBarHeight() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		methods: {
			onTabSelected: function(index, item) {
				this.tabSelected = index
				this.$refs.orderList.requestOrderData(index)
			}
		},
	}
</script>
<style lang="scss">
	@import '@/common/uni-nvue.css';

	page {
		background-color: $uni-bg-color-grey;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}

	.topBackrop {
		width: 100%;
		height: 376rpx;
		display: flex;
		padding: 0rpx 30rpx;
		position: fixed;
		flex-direction: column;
		justify-content: flex-end;
		background-image: linear-gradient(to bottom, #F8D849, #FFED9C);
	}

	.topContainer {
		width: 100%;
		padding: 0rpx 25rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}

	.top {
		width: 100%;
		z-index: 10;
	}

	.search {
		padding: 23rpx 25rpx;
	}
</style>